<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="明月">
    <title>下拉菜单</title>
    <style>
        * {
            box-sizing: border-box;
        }

        ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        a {
            color: #999;
            text-decoration: none;
        }

        div {
            width: 1000px;
            height: 50px;
            line-height: 50px;
            background-color: #666;
            margin: 0 auto;
        }

        .head {
            text-align: center;
            display: flex;
            justify-content: space-around;
        }

        .head>li>a {
            font-size: 20px;
        }

        .menu {
            width: 100px;
            background-color: #eee;
            text-align: center;
            border: 1px solid #999;
        }
        /* .head>li>a:hover{
               color: orange;
          } */
          .menu{
              visibility: hidden;
          } 
          /* .head>li:hover .menu{
              visibility: visible;
          }   */
    </style>
</head>

<body>
    <div>
        <ul class="head">
            <li><a href="#">公司简介</a>
                <ul class="menu">
                    <li><a href="#">概况介绍</a></li>
                    <li><a href="#">发展历史</a></li>
                    <li><a href="#">公司实力</a></li>
                </ul>
            </li>
            <li><a href="#">产品介绍</a>
                <ul class="menu">
                    <li><a href="#">概况介绍</a></li>
                    <li><a href="#">发展历史</a></li>
                    <li><a href="#">公司实力</a></li>
                </ul>
            </li>
            <li><a href="#">联系我们</a>
                <ul class="menu">
                    <li><a href="#">概况介绍</a></li>
                    <li><a href="#">发展历史</a></li>
                    <li><a href="#">公司实力</a></li>
                </ul>
            </li>
            <li><a href="#">人才招聘</a>
                <ul class="menu">
                    <li><a href="#">概况介绍</a></li>
                    <li><a href="#">发展历史</a></li>
                    <li><a href="#">公司实力</a></li>
                </ul>
            </li>
        </ul>
    </div>
    <script src="./jquery.js"></script>
</body>

</html>
<script>
    var head = $('.head');
    head.children('li').children('a').hover(function () {
        $(this).css('color', 'orange').css('text-decoration', 'underline');
    }, function () {
        $(this).css('color', '#999').css('text-decoration', 'none');
    });
    // console.log(head.children('li').children('a'));
    // 下划线
    var menu = $('.menu');
    console.log(menu);
    menu.children('li').children('a').hover(function () {
        $(this).css('text-decoration', 'underline');
    }, function () {
        $(this).css('text-decoration', 'none');
    });
    // 下拉菜单
    $('.head').children('li').mouseover(function () {
          $('.menu').eq($(this).index()).css('visibility',' visible')
    });
    $('.head').children('li').mouseout(function (){
            $('.menu').eq($(this).index()).css('visibility','hidden')
    });
// --------------------------------------------------------------
    // var lis=$('.head').children('li');
    // console.log(lis);
    // $(lis).each(function(index){
    //      $(this).mouseover(function(){
    //          $('.menu').eq(index).css('visibility',' visible');
    //      });
    //          $(this).mouseout(function(){
    //          $('.menu').eq(index).css('visibility',' hidden');
    //      });
    // });
</script>